<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>组件间的通信-父向子传</title>
	<script src="/js/vue.js"></script>
	<style>

	</style>
</head>

<body>
	<!-- 父向子传递数据的时候， 通过pros properties : 1）子组件通过props接收子组件传递的数据 2）父组件通过v-bind绑定数据  -->

	<div id="app">
		<!-- 3. 使用组件 -->
		<!-- <my-cpn></my-cpn> -->
		 
		 <!-- 2)父组件通过v-bind绑定数据 -->
		 <obj v-bind:childmsg = "fathermsg2" :childmovies = "fathermovies"></obj>
	</div>

	<br>
	<!-- 第一步：创建模板 -->
	<template id="cpn">
		<div>
			<h2>这是子组件的标题</h2>
			<p>这是子组件的内容</p>
			<button @click="increase()">这是子组件的按钮+</button>
			<button @click="decrease()">这是子组件的按钮-</button>
			<p>这是子组件的计数{{counter}}</p>
			<p>{{msg}}</p>
			<p>{{childmsg}}</p>
			<ul>
				<li v-for="item in childmovies">{{item}}</li>
			</ul>
		</div>
	</template>




	<script>
		//es6 面向对象 创建对象 创建类 
		class Button {

		}


		//2. 创建子组件对象	
		const obj = {//子组件
			template: '#cpn',
			data() { // 组件内的data 键值对 value必须是一个函数，且要返回一个对象
				return {
					msg: 'hello world',
					msg2: this.childmsg,// 可以通过props接收数据同时绑定到data里面
					counter: 0
				}
			},
			//1）子组件通过props接收子组件传递的数据
			// props:['childmsg'],//第一种方式：简写，数组语法，用数组接收数据，里面长得像字符串，实际是一个变量
			props:{//第二种方式：对象语法，用对象接收数据，功能更加全面
				//1) 可以验证js的九大类型，对类型进行限制
				// childmsg:String
				//2) 可以限制多个
				// childmsg:[Array,String]
				//3) 可以限制自定义类
				// childmsg:Button
				//4) 对象语法的完整形式
				childmsg:{//对象
					type:String, // 数据类型的限制
					default:'hello Kitty',// 默认值，如果不传，则显示
					required:false //是否为必填 
				},
				childmovies:{
					type:[String,Array], // 数据类型的限制
					//default:'hello Kitty',// 默认值，如果不传，则显示
					default(){
						return [1,2,3,4,5]
					},//当数据类型为数组的时候，给默认值，需要用回调函数返回数组来设置
					required:false //是否为必填 					
				}
			},
			methods: {
				increase() {
					console.log(this);
					this.counter++
				},
				decrease() {
					this.counter--
				}
			}
		}


		let app = new Vue({//父组件
			el: "#app",
			data: { // 实例中data 键值对，value是对象
				fathermsg: 'hello shane'
			},
			methods: {

			},
			components: {
				// 增强写法
					obj
				// 'my-cpn': obj
			}
		})
	</script>
</body>

</html>